<template>
  <div>
    <basic-container>
      <el-form ref="searchForm" :model="searchForm" label-width="80px" size="mini" >
        <el-col :span="5">
          <el-form-item label="出库状态:" prop="borrowingStatus">
            <el-select v-model="searchForm.borrowingStatus" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="item in this.statusList" :key="item.label" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="仓库:" prop="warehouseId">
            <el-select v-model="searchForm.warehouseId" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="item in labList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item  label="审批号:" prop="approvalNumber">
            <el-input v-model="searchForm.approvalNumber" placeholder="请输入审批号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item  label-width="20px">
            <el-button type="primary" @click="submitForm('searchForm')">搜索</el-button>
            <el-button @click="resetForm('searchForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>

      <!---表格--->
      <avue-crud :option="tableOption" :data="tableData" :table-loading="tableLoading" :page="page" ref="crud" @size-change='sizeChange' @current-change="currentPage" >
        <template slot-scope="scope" slot="borrowingStatus">
          {{ formatterStatus( scope.row.borrowingStatus ) }}
          <!-- <el-button type="info" plain size="mini" @click.stop="processBtn(scope.row)">流程</el-button> -->
        </template>
        <template slot-scope="scope" slot="warehouseId">{{ formatterWarehouse( scope.row.warehouseId ) }}</template>
        <template slot-scope="scope" slot="borrowingBeginTime">
          <div>{{ scope.row.borrowingAppointment.borrowingBeginTime }}</div>
          <div>{{ scope.row.borrowingAppointment.borrowingEndTime }}</div>
        </template>
        <template slot-scope="scope" slot="applyfor">
          <div>{{ scope.row.departmentName }} - {{ scope.row.userName }}</div>
          <div>{{ scope.row.insertTime }}</div>
        </template>
        <template slot-scope="scope" slot="outjoint">
          <div>{{ scope.row.borrowingUserName }}</div>
          <div>{{ scope.row.borrowingTime }}</div>
        </template>
        <template slot-scope="scope" slot="comejoint">
          <div>{{ scope.row.returnUserName }}</div>
          <div>{{ scope.row.returnTime }}</div>
        </template>
        <template slot-scope="" slot="menuLeft">
          <span class="table-msg"><span>*</span>待出库：7天之后自动中止出库</span>
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button type="primary" size="small"  plain @click="examineModeOpen(scope.row, scope.index)">申请单</el-button>
          <el-button type="primary" size="small"  plain @click="menuModeBtn(scope.row, scope.index, 2)">归库</el-button>
          <el-button type="primary" size="small"  plain @click="menuModeBtn(scope.row, scope.index, 0)">出库</el-button>
          <el-button type="primary" size="small"  plain @click="menuModeBtn(scope.row, scope.index, 1)">中止</el-button>
        </template>
      </avue-crud>
    </basic-container>

    <el-dialog title="流程" :visible.sync="processMode" width="35%">
      <div class="block">
        <ul class="el-timeline is-reverse">
          <li class="el-timeline-item" v-for="(activity, index) in activities"
              :key="index">
            <div class="el-timeline-item__tail"></div>
            <div class="el-timeline-item__node el-timeline-item__node--normal el-timeline-item__node--"></div>
            <div class="el-timeline-item__wrapper">
              <el-card>
                <div class="el-timeline-item__timestamp is-bottom">年-月-日  时：分</div>
                <div class="el-timeline-item__content">审批人   不通过</div>
                <h4>备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注</h4>
              </el-card>
            </div>
          </li>
        </ul>
      </div>
    </el-dialog>

    <!---归、出、终止弹窗---->
    <el-dialog :title="menuModeName" :visible.sync="menuMode" width="40%" @close="resetForm('menuModeForm')">
      <div>
        <el-row>
          <el-col :span="4">设备类别：</el-col>
          <el-col :span="8">{{ checkInfo.equipmentTypeName }}</el-col>
          <el-col :span="4">设备编码：</el-col>
          <el-col :span="8">{{ checkInfo.coded }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">设备名称：</el-col>
          <el-col :span="8">{{ checkInfo.name }}</el-col>
          <el-col :span="4">设备型号：</el-col>
          <el-col :span="8">{{ checkInfo.marking }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">品牌：</el-col>
          <el-col :span="8">{{ checkInfo.brand }}</el-col>
          <el-col :span="4">仓库：</el-col>
          <el-col :span="8">{{ formatterWarehouse( checkInfo.warehouseId ) }}</el-col>
        </el-row>
        <el-row>
         <el-form ref="menuModeForm" :model="menuModeForm" label-width="70px" size="mini" >
            <el-col :span="20">
              <el-form-item label="备注:" prop="remarks" :rules="menuModeFormRules" >
                <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4}" placeholder="请输入备注信息..."
                          ma v-model="menuModeForm.remarks"></el-input>
              </el-form-item>
            </el-col>
           <el-col :span="20">
             <el-form-item >
               <el-button size="small" @click="menuMode = false">关 闭</el-button>
               <el-button size="small" type="primary"  @click="menuModeFormBtn">{{ menuModeName }}</el-button>
             </el-form-item>
           </el-col>
          </el-form>
        </el-row>
      </div>
    </el-dialog>

    <el-dialog title="申请单" :visible.sync="examineMode" width="60%">
      <div id="printTest">
        <el-row :gutter="10">
          <el-col :span="3">审批单号：</el-col>
          <el-col :span="9">{{ checkInfo.approvalNumber }}</el-col>
        </el-row>
        <div class="lineDiv"></div>
        <el-row :gutter="10" v-if="examineModeType != 3">
          <el-col :span="3">部门：</el-col>
          <el-col :span="5">{{ checkInfo.departmentName }}</el-col>
          <el-col :span="3">申请人：</el-col>
          <el-col :span="5">{{ checkInfo.userName }}</el-col>
          <el-col :span="3">申请时间：</el-col>
          <el-col :span="5">{{ checkInfo.insertTime }}</el-col>
        </el-row>
        <el-row :gutter="10" v-if="examineModeType != 3">
          <el-col :span="3">备注：</el-col>
          <el-col :span="21">{{ checkInfo.remarks }}</el-col>
        </el-row>
        <div class="lineDiv" v-if="examineModeType != 3"></div>
        <el-row :gutter="10">
          <el-col :span="3">设备类别：</el-col>
          <el-col :span="9">{{ checkInfo.equipmentTypeName }}</el-col>
          <el-col :span="3">设备编码：</el-col>
          <el-col :span="9">{{ checkInfo.coded }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="3">型       号：</el-col>
          <el-col :span="9">{{ checkInfo.marking }}</el-col>
          <el-col :span="3">设备名称：</el-col>
          <el-col :span="9">{{ checkInfo.name }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="3">仓 库：</el-col>
          <el-col :span="9">{{ formatterWarehouse( checkInfo.warehouseId ) }}</el-col>
          <el-col :span="3">品       牌：</el-col>
          <el-col :span="9">{{ checkInfo.brand }}</el-col>
        </el-row>
        <el-row :gutter="10" v-if="examineModeType != 3">
          <el-col :span="3">借用时间：</el-col>
          <el-col :span="9"><template v-if="checkInfo.borrowingAppointment">{{ checkInfo.borrowingAppointment.borrowingBeginTime }} - {{ checkInfo.borrowingAppointment.borrowingEndTime }}</template></el-col>
        </el-row>
        <div class="lineDiv" v-if="examineModeType == 1"></div>
        <el-row :gutter="10" v-if="examineModeType == 1">
          <el-col :span="3">审批状态：</el-col>
          <el-col :span="5">xxxxxxxx</el-col>
          <el-col :span="3">审批人：</el-col>
          <el-col :span="5">xxxx</el-col>
          <el-col :span="3">审批时间：</el-col>
          <el-col :span="5">xxxxxxxx</el-col>
        </el-row>
        <el-row :gutter="10" v-if="examineModeType == 1">
          <el-col :span="3">备注：</el-col>
          <el-col :span="21">xxxxxxxx</el-col>
        </el-row>
        <el-row :gutter="10" v-if="examineModeType == 3">
          <el-form ref="form" :model="updataMode">
            <el-form-item>
              <el-col :span="3">预约时间：</el-col>
              <el-col :span="16"><el-date-picker v-model="updataMode.name" size="small" type="date" placeholder="选择日期"></el-date-picker></el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="3">备注：</el-col>
              <el-col :span="16"><el-input type="textarea" size="small" v-model="updataMode.name" :autosize="{ minRows: 2, maxRows: 5}"
                                           placeholder="最多可输入50字"></el-input></el-col>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
          <!-- <el-button size="small" type="primary" >打  印</el-button> -->
          <el-button size="small" @click="examineMode = false">关 闭</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import { tableOption } from "@/const-personal/equipment/appointment/lendreturn.js"
import { getListOfSearch, getListLab, findById, outType } from "@/api/equipment/appointment/lendreturn.js"
export default {
  data() {
    return {
      //查询表单数据
      searchForm:{
        borrowingStatus: '', // 状态
        warehouseId: '', // 仓库
        approvalNumber: '', // 审批号
      },
      page: {
        total: 0, // 总条数
        currentPage: 1, // 当前页数
        pageSize: 10,// 每页显示多少条
        pageSizes: [5,10,20]
      },
      labList: [], // 仓库下拉列表
      statusList: [ // 出库状态列表
        { value: 0, label: '待出库' },
        { value: 1, label: '待归库' },
        { value: 2, label: '已归库' },
        { value: 3, label: '已中止' },
      ],
      checkInfo: {
        borrowingAppointment: {}
      }, // 详情
      tableLoading: false, //表格等待框的控制
      tableData:[], // 表格数据
      tableOption: tableOption, // 表格配置

      examineMode:false, // 申请单弹框
      menuMode: false, // 操作弹框
      menuModeName: '操作', //操作弹框名称
      examineModeType: 0, // 操作类型
      menuModeForm: { // 操作备注
        remarks: '',
        type: 0, // 0出库、1终止、2归库
      },
      menuModeFormRules: [
        {required: true, message: '请输入备注', trigger: 'blur'},
        { max: 50, message: '输入的长度请在 50 个字符', trigger: 'blur'}
      ],
      
      //流程
      processMode: false,
      //流程数据
      reverse: true,
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }],
      
    };
  },
  computed: {
    formatterStatus () { // 过滤 出库状态
      return ((id) => {
        for (let i = 0; i < this.statusList.length; i++) {
          if (this.statusList[i].value == id) {
            // console.log("name:" + this.equipmentType[i].label)
            return this.statusList[i].label
          }
        }
      })
    },
    formatterWarehouse () { // 过滤 仓库
      return ((id) => {
        for (let i = 0; i < this.labList.length; i++) {
          if (this.labList[i].id == id) {
            return this.labList[i].name
          }
        }
      })
    },
  },
  mounted() {
    this._getListOfSearch()
    this._getListLab()
  },
  methods:{
    // 查 询所有仓库 列表接口
    _getListLab() {
      getListLab().then(res => {
        res = res.data
        if (res.code == 200) {
          this.labList = res.data
        } else {
          this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
        }
      })
    },
    // 查 询表格数据 
    _getListOfSearch() {
      this.tableLoading = true;
      this.searchForm.page = this.page.currentPage;
      this.searchForm.size = this.page.pageSize;
      getListOfSearch(this.searchForm).then(res => {
        res = res.data
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.page.total = res.data.total;
          this.tableLoading = false;
        } else {
          this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
        }
      })
    },
    // 切换页面
    currentPage (val) {
      this.page.currentPage = val;
      this._getListOfSearch();
    },
    sizeChange (val) {
      this.page.pageSize = val
      this._getListOfSearch()
    },
    // 查 详情 
    _findById(id) {
      findById({ id: id }).then(res => {
        res = res.data
        if (res.code == 200) {
          this.checkInfo = res.data;
        } else {
          this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
        }
      })
    },
    // 提 交接口 
    _outType() {
      let data = {
        id: this.checkInfo.id,
        remark: this.menuModeForm.remarks, // 备注
        type: this.menuModeForm.type // 0出库、1终止、2归库
      }
      outType(data).then(res => {
        res = res.data
        if (res.code == 200) {
          this.menuMode = false;
          this.$notify({ title: `${this.menuModeName}成功！`, type: 'success'});
          this._getListOfSearch()
        } else {
          this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
        }
      })
    },
    // 搜索 
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this._getListOfSearch()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 表单重置 
    resetForm(formName) {
      // this.$nextTick(() => {  })
      this.$refs[formName].resetFields();

      if (formName == 'searchForm') {
        this.page.pageSize = 10;
        this.page.currentPage = 1;
        this._getListOfSearch();
      }
    },
    // 申请单
    examineModeOpen(row,index){
      this.examineMode = true;
      this._findById(row.id)
    },
    // 流程
    processBtn(row){
      console.log(row)
      this.processMode = true
    },
    // 操作按钮 弹出弹窗
    menuModeBtn(row,index,type){
      this._findById(row.id)
      this.menuMode = true;
      this.menuModeName = type == 2 ? '归库': type == 0 ? '出库':'中止';
      this.menuModeForm.type = type;
    },
    // 提交按钮
    menuModeFormBtn(){
      this.$refs['menuModeForm'].validate((valid) => {
        if (valid) {
          this._outType()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>
<style>
  .table-msg{
    font-size: 13px;
  }
  .table-msg>span{
    color: red;
  }
  .el-dialog__body{
    padding-top: 15px;
    padding-bottom: 0px;
  }
  .lineDiv{
    border-top: 1px solid #d6d6d6;
    margin: 0px 1% 20px 25px;
    width: 90%;
  }
  .el-dialog__body{
    padding-top: 15px;
  }

  .el-row {
    margin-left: 20px !important;
    margin-bottom: 20px;
  }
  .el-col-3{
    font-weight:600;
  }
  .lineDiv{
    border-top: 1px solid #d6d6d6;
    margin: 0px 1% 20px 25px;
    width: 90%;
  }
</style>